<template>
  <div class="flex-bet">
    <div class="flex-g-1 flex">
      <a href="#" target="_self" class="i-link i-layout-header-logo i-link-color i-layout-header-logo-stick">
        <img :src="headLogo" v-if="headLogo" alt="logo"/>
      </a>
      <div class="oneMenu">
        <Menu mode="horizontal" theme="primary" width="auto" :active-name="menuCurrent" @on-select="showToggle">
          <div class="layout-logo"></div>
          <div class="layout-nav flex-wrap">
            <template v-for="(topmenu,index) in topMenu">
              <MenuItem :name="topmenu.c_name?topmenu.c_name:'/'" :key="index">
                <span class="mar_r5 iconfont" :class="topmenu.icon"></span>
                {{ topmenu.nav_name }}
              </MenuItem>
            </template>
          </div>
        </Menu>
      </div>
    </div>
    <div class="flex-g-0">
      <div class="right_model flex-y-center fr">
        <div class="mar_r20">
          <el-button type="text">
            <i class="el-icon-search el-icon color_f fon_18"></i>
          </el-button>
        </div>
        <div class="mar_r20">
          <el-button type="text">
            <i class="el-icon-message-solid el-icon color_f fon_18"></i>
          </el-button>
        </div>
        <el-dropdown trigger="click">
          <div class="flex-y-center">
            <img :src="systemInfo.portrait" v-if="systemInfo.portrait" alt="logo" class="yb_logo2 mar_r15 bor_rad50"/>
            <img v-else alt="logo" src="../../assets/img/moren.png" class="yb_logo2 mar_r15 bor_rad50"/>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <a class="color_3" @click="myAccount">我的账号</a>
            </el-dropdown-item>
            <el-dropdown-item v-if="loginType!=2">
              <a class="color_3" @click="returnSystem">返回系统</a>
            </el-dropdown-item>
            <el-dropdown-item>
              <a class="color_3" @click="outSystem">退出系统</a>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>
<script>
import {mapGetters, mapMutations, mapState} from "vuex";
import {getUrl, signOut} from "@/api/public";

export default {
  name: 'TopBar',
  data() {
    return {
      menuCurrent:'/',
      topMenu_1:[],
    }
  },
  async created(){
    this.menuCurrent = this.storeMenuCurrent;
    this.menuCurrent = sessionStorage.getItem('menuCurrent') ? sessionStorage.getItem('menuCurrent') : '/';
  },
  props: {
    topMenu: {}
  },
  computed: {
    ...mapGetters({
      headLogo: 'getLogo',
      loginType: 'getLoginType',
      systemInfo:'getSystemInfo',
    }),
      ...mapState(['updataOrder', 'storeMenuCurrent', 'nav','userInfo'])
  },
  methods:{
    ...mapMutations(['searchMarket', 'setmenuCurrent', 'menuNav']),
    async outSystem() {
      if (this.loginType == 2) {
        this.$router.push({path: '/login'});
      } else {
        const {data} = await getUrl();
        if (data.outSystem) {
          const {msg} = await signOut();
          this.$baseMessage(msg, 'success');
          window.open(data.outSystem, '_self');
        }
      }
    },
    async returnSystem() {
      const {data} = await getUrl();
      window.open(data.returnSystem, '_blank');
    },
    myAccount() {
      // this.menuCurrent = 13;
      this.$router.push({path: 'mynumber'});
      sessionStorage.setItem('menuCurrent', 'mynumber');
      this.setmenuCurrent('mynumber');
    },
    showToggle(name) {
      this.$router.push({path: name});
      this.setmenuCurrent(name);
      sessionStorage.clear('leftActive');
      this.leftActive = '1';
      this.leftOpenName = ['1'];
      sessionStorage.setItem('menuCurrent', name);
    },
  }
}
</script>
<style lang="scss">


.i-layout-header-logo-stick {
  width: 200px;
  margin-right: 40px;
  text-align: center;
}

.i-layout-header-logo {
  display: inline-block;
  height: 64px;
  line-height: 64px;
}

.i-link-color,
.i-link-color:active,
.i-link-color:hover {
  color: inherit;
}

.i-link {
  cursor: pointer;
}

.i-layout-header-logo img {
  height: 80%;
  vertical-align: middle;
}

.right_model {
  padding: 0 40px;

}


</style>